<template>
	<view class="page">
		<!-- <c-nav-bar :title="title"></c-nav-bar> -->
		<customNavBar1 :title="title" style='color: #111 !important;'></customNavBar1>

		<view class="hander-one" :style="{'padding-top':mt+'px'}">

			<view class="top">
				<view class="box">
					<view class="info">
						<view class="date" v-if="!isCarShip">
							<text>{{cfDate}}</text>
							<text>{{cfWeek}}出发</text>
						</view>
						<view class="date date_ship" v-else>
							<text>{{cfDate}}</text>
							<text>{{cfWeek}}出发</text>
							<view class="ds_time" v-if="item.timeMemosStr">
								<image src="https://i.ringzle.com/file/20240325/7ee2b8607f1344638cec2a68f5056593.png"></image>
								<span>{{item.timeMemosStr}}</span>
							</view>
						</view>
						<view class="time_addr" v-if="!isCarShip">
							<view class="ta_time">
								<text>{{item.sailTime}}</text>
								<text>{{item.clxm}}</text>
							</view>
							<view class="ta_addr">
								<image src="@/static/index/steamerTicket/icon_line2.png" mode=""></image>
								<view>
									<text>{{item.startPortName}}</text>
									<text>{{item.endPortName}}</text>
								</view>
							</view>
						</view>
						<view class="time_addr ta_car_ship" v-else>
							<view class="ta_time">
								<text>{{item.busStartTime}} 开车</text>
								<text>{{item.sailTime}} 开船</text>
								<text style="color: transparent;">d</text>
							</view>
							<view class="ta_addr">
								<image src="https://i.ringzle.com/file/20240325/b68b2d2aa04f4c50b70ebe13341f25ec.png" mode=""></image>
								<view>
									<text>{{item.startPortName||''}}</text>
									<text>{{item.embarkPortName||''}}</text>
									<text>{{item.endPortName||''}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tb_bottom" @tap="toInstructions">
						<view>
							<image src="https://i.ringzle.com/file/20240220/51374f7aa1ae44ca9fc0703f395a6118.png">
							</image>
							<text>取退改票说明</text>
						</view>
						<image src="@/static/index/steamerTicket/icon_yjt.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="ship_spaces" v-if="!shipShow">
				<text>选择舱位</text>
				<view class="box">
					<view v-for="(pre,index) in item.seatClasses" :key="index"
						:class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
						<view class="sb_left">
							<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
							<view class="sbl_info">
								<view class="cbli_title">{{pre.className}}</view>
								<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票
									{{pre.pubCurrentCount}} 张
								</view>
								<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
							</view>
						</view>
						<view class="sb_right">
							<view class="sbr_price">
								<text>￥</text>
								<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
								<text>起</text>
							</view>
							<view class="sbr_yd" @tap="toReserve(pre)">预订</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ship_spaces ship_spaces_car" v-else>
				<text>车辆及随车人员</text>
				<view class="box">
					<view v-for="(pre,index) in item.driverSeatClass" :key="index"
						:class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
						<view class="sb_left">
							<image :src="cic.cabinImg['中舱']"></image>
							<view class="sbl_info">
								<view class="cbli_title">{{pre.className}}</view>
								<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票
									{{pre.pubCurrentCount}} 张
								</view>
								<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
							</view>
						</view>
						<view class="sb_right">
							<view class="sbr_price">
								<text>￥</text>
								<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
								<!-- <text>起</text> -->
							</view>
							<!-- <view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?(pre.pubCurrentCount!=0):(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelectCar(pre,index):''">{{pre.selected?'已选':'预订'}}</view> -->
							<view class="sbr_yd" @tap="toOrder(pre)">预订</view>
						</view>
					</view>
				</view>
				<!-- <text class="mt49">同乘人可选舱位</text>
			<view class="box">
				<view v-for="(pre,index) in item.seatClasses" :key="index" :class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票 {{pre.pubCurrentCount}} 张</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<text>起</text>
						</view>
						<view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?pre.pubCurrentCount!=0:(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelected(pre,index):''">{{pre.selected?'已选':'预订'}}</view>
					</view>
				</view>
			</view> -->
			</view>
			<view class="bottom" v-if="selectList.length>0">
				<view class="b_left">
					<text>待支付</text>
					<view>￥<span>{{price}}</span></view>
				</view>
				<view class="b_right">
					<view class="br_left" @tap="detailsShow=true">
						<text>明细</text>
						<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
					</view>
					<view class="br_right" @tap="toPay">
						去支付
					</view>
				</view>
			</view>
			<u-popup :show="detailsShow" @close="detailsShow=false">
				<view class="details">
					<view class="title">
						<text>费用明细</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false"></image>
					</view>
					<view class="address">{{item.startPortName}}-{{item.endPortName}}</view>
					<view class="tickets">
						<text>成人票</text>
						<view>￥{{adultPrice}}</view>
					</view>
					<view class="tickets">
						<text>车票</text>
						<view>￥{{carPrice}}</view>
					</view>
					<view class="total">
						<text>合计</text>
						<view>￥{{price}}</view>
					</view>

					<view class="bottom">
						<view class="b_left">
							<text>待支付</text>
							<view>￥<span>{{price}}</span></view>
						</view>
						<view class="b_right">
							<view class="br_left" @tap="detailsShow=false">
								<text>明细</text>
								<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
							</view>
							<view class="br_right" @tap="toPay">
								去支付
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		</view>
	</view>
</template>

<script>
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		name: 'confirmBooking',
		components: {
			GetPhoneNumber,
			customNavBar1
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item: '',
				show: false,
				shipShow: false,
				selectList: [],
				price: 0,
				detailsShow: false,
				cfDate: '',
				cfWeek: '',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				adultPrice: 0,
				carPrice: 0,
				hasLocal: false, //是否包含本地人
				cic: this.$cic,
				title: '',
				isCarShip: false
			}
		},
		onLoad(option) {
			if (option.type && option.type == 'ship') this.show = true;
			if (option.item) {
				this.item = JSON.parse(option.item);
				this.title = this.item.startPortName + ' - ' + this.item.endPortName;
				if (this.item.startPortName.indexOf('上海') > -1) this.isCarShip = true;
				for (let i = 0; i < this.item.seatClasses.length; i++) {
					this.$set(this.item.seatClasses[i], 'selected', false);
				}
				this.item.driverSeatClass && this.item.driverSeatClass.forEach((d, i) => {
					this.$set(this.item.driverSeatClass[i], 'selected', false)
				})
				this.cfDate = new Date(this.item.sailDate).Format('MM月dd日');
				this.cfWeek = this.weeks[new Date(this.item.sailDate).getDay()];
				this.getIsLocal();
			}
		},
		onReady() {
			if (uni.getStorageSync('shipType') && uni.getStorageSync('shipType') == 2) this.shipShow = true
		},
		methods: {
			toReserve(item) {
				if (!this.hasLocal && !item.pubCurrentCount) return
				if (this.hasLocal && !item.localCurrentCount && !item.pubCurrentCount) return

				this.$login().then(res => {
					if (res === 0) {
						this.item.cangInfo = item;
						uni.navigateTo({
							url: '/pagesIndex/steamerTicket/passengerPay?item=' + JSON.stringify(this.item)
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			loginSuccess() {
				this.getIsLocal();
			},
			toSelectCar(item, index) {
				item.type = 1;
				if (!this.item.driverSeatClass) return
				this.$set(this.item.driverSeatClass[index], 'selected', !this.item.driverSeatClass[index].selected);
				if (this.item.driverSeatClass[index].selected) this.selectList.push(item)
				else {
					let idx = this.selectList.findIndex(d => d.className == item.className);
					if (idx >= 0) this.selectList.splice(idx, 1)
				}
				this.dealPrice();
			},
			toSelected(item, index) {
				item.type = 2;
				if (!this.item.seatClasses) return
				this.$set(this.item.seatClasses[index], 'selected', !this.item.seatClasses[index].selected);
				if (this.item.seatClasses[index].selected) this.selectList.push(item)
				else {
					let idx = this.selectList.findIndex(d => d.className == item.className);
					if (idx >= 0) this.selectList.splice(idx, 1)
				}
				this.dealPrice();
			},
			//计算价格
			dealPrice() {
				this.price = this.selectList.reduce((cur, pre) => cur + pre.totalPrice, 0);
				if (this.selectList.find(d => d.type == 1)) this.carPrice = this.selectList.find(d => d.type == 1)
					.totalPrice;
				else this.carPrice = 0;
				if (this.selectList.find(d => d.type == 2)) this.adultPrice = this.selectList.find(d => d.type == 2)
					.totalPrice;
				else this.adultPrice = 0;
			},
			//去支付(跳转)
			toPay() {
				this.item.carInfo = this.selectList.find(d => d.type == 1);
				this.item.cangInfo = this.selectList.find(d => d.type == 2) || this.item.seatClasses[0];
				if (!this.item.carInfo) return this.$showToast('请选择车辆');
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/passengerPay?item=' + JSON.stringify(this.item)
				})
			},
			//取退改票说明
			toInstructions() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/ticketingInstructions?title=取票、退票、改签说明'
				})
			},
			toOrder(item) {
				this.$login().then(res => {
					if (res === 0) {
						this.item.carInfo = item;
						if(this.item.seatClasses.length){
							this.item.cangInfo = this.item.seatClasses.find(s=>s.className=='上舱') || this.item.seatClasses[0];
						}else{
							this.item.cangInfo = {
								className:'',
								totalPrice:0,
								halfPrice:0,
								localPrice:0,
								localHalfPrice:0,
								pubCurrentCount:0,
								isNoCang:true
							}	
						}
						uni.navigateTo({
							url: '/pagesIndex/steamerTicket/passengerPayCar?item=' + JSON.stringify(this.item)
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		height: 100%;
		background: #F5F8FA;

		.hander-one {
			background-image: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 468rpx;
			box-sizing: border-box;
		}

		.top {
			padding: 20rpx 24rpx;

			.box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;

				.info {
					// background: linear-gradient(to right, #3092E0, #45B7DE);
					background-color: #007A69;
					border-radius: 16rpx;
					padding: 40rpx 24rpx;

					.date {
						display: flex;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;

							&:last-child {
								margin-left: 15rpx;
							}
						}

						&.date_ship {
							position: relative;
							text {
								&:nth-child(2) {
									margin-left: 15rpx;
								}

								&:nth-child(3) {
									margin-left: 23rpx;
								}
							}
							.ds_time{
								position: absolute;
								right: 0;
								top: 50%;
								margin-top: -13rpx;
								display: flex;
								align-items: center;
								image{
									width: 26rpx;
									height: 26rpx;
								}
								span{
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #FFFFFF;
									line-height: 26rpx;
									margin-left: 10rpx;
								}
							}
						}
					}

					.time_addr {
						padding: 30rpx 0 0 96rpx;
						display: flex;
						align-items: center;

						.ta_time {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: -12rpx;

							text {
								&:first-child {
									font-size: 40rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
								}

								&:last-child {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
									margin-top: 30rpx;
								}
							}
						}

						.ta_addr {
							display: flex;
							align-items: center;
							padding-left: 40rpx;

							image {
								width: 8rpx;
								height: 68rpx;
							}

							&>view {
								padding-left: 20rpx;
								display: flex;
								flex-direction: column;

								text {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;

									&:last-child {
										margin-top: 29rpx;
									}
								}
							}
						}
						
						&.ta_car_ship{
							padding: 30rpx 0 0 80rpx;
							.ta_time{
								margin-top: 0;
								text{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 30rpx;
									color: #FFFFFF;
									margin-top: 28rpx;
									&:first-child{
										margin-top: 0;
									}
								}
							}
							.ta_addr{
								padding-left: 20rpx;
								image{
									width: 8rpx;
									height: 128rpx;
								}
								&>view{
									margin-top:0;
									text{
										margin-top: 28rpx;
										&:first-child{
											margin-top: 0;
										}
									}
								}
							}
						}
					}
				}

				.tb_bottom {
					padding: 27rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view {
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 26rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #007A69;
							margin-left: 10rpx;
						}
					}

					&>image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}

		.ship_spaces {
			padding: 30rpx 24rpx;

			&>text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}

			.box {
				padding: 16rpx 0;

				&>view {
					width: 100%;
					margin-top: 20rpx;
					padding: 20rpx 24rpx 20rpx 20rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.sb_left {
						display: flex;

						image {
							width: 156rpx;
							height: 156rpx;
						}

						.sbl_info {
							padding-left: 24rpx;

							.cbli_title {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								margin-top: 12rpx;
							}

							.cbli_item {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-top: 14rpx;
							}
						}
					}

					.sb_right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.sbr_price {
							display: flex;
							align-items: flex-end;

							text {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FE401A;

								&.sbrp_p {
									font-size: 44rpx;
									font-family: Arial-BoldMT, Arial;
									font-weight: BoldMT;
									color: #FE401A;
									line-height: 38rpx;
								}
							}
						}

						.sbr_yd {
							width: 108rpx;
							height: 56rpx;
							background: #007A69;
							border-radius: 10rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: Regular;
							color: #FFFFFF;
							margin-top: 24rpx;

							&.active {
								background:#007A69;

							}
						}
					}

					&.active {
						text {
							color: #AAAAAA !important;
						}

						.sbr_yd {
							background: #CCCCCC;
						}
					}
				}
			}

			&.ship_spaces_car {
				&>text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.mt49 {
					margin-top: 49rpx;
				}

				.sb_left {
					text {
						font-size: 32rpx !important;
						font-family: PingFang-SC-Bold, PingFang-SC !important;
						font-weight: bold !important;
						color: #111111 !important;
						margin-top: 0 !important;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: calc(100% - 60rpx);
			background: #fff;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 16rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b_left {
				display: flex;
				align-items: center;

				&>text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				&>view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4141;
					margin-left: 16rpx;

					span {
						font-size: 48rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF4141;
					}
				}
			}

			.b_right {
				display: flex;
				align-items: center;

				.br_left {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}

				.br_right {
					width: 220rpx;
					height: 80rpx;
					background: #007A69;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
				}
			}
		}

		.details {
			padding: 40rpx 30rpx 200rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.address {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
			}

			.tickets {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 42rpx;

				&>text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				&>view {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					span {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 61rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				view {
					height: 36rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>